<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
  <style>
    body{
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    .prebox{
      margin: 0 126px;
      padding: 10px 30px;
      width: 128px;
      height: 322px;
      background: rgba(255,255,255,.1);
      border-radius: 2px;
      box-shadow: 1px 2px 10px -5px #000;
    }
    pre{
      color: #000;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div>
    <div class="prebox">
      <pre id="text2"></pre>
    </div>
    <div style="display:none" id="text">
      乡愁
      小时候
      乡愁是一枚小小的邮票
      我在这头
      母亲在那头

      长大后
      乡愁是一张窄窄的船票
      我在这头
      新娘在那头

      后来啊
      乡愁是一方矮矮的坟墓
      我在外头
      母亲在里头

      而现在
      乡愁是一湾浅浅的海峡
      我在这头
      大陆在那头
    </div>
  </div>
  <script type="text/javascript">
    var index = 0;//用来计数
    var text = document.getElementById("text").innerHTML;
    function dome() {
      document.getElementById("text2").innerText = text.substring(0,index++);//截取字符串substring
      //判断计数的长度是否等于文本的长度，等于的时候则用clearInterval停止setInterval计时器
      if(index == text.length){
        clearInterval(time);
      }
    }
    //声明一个变量，变量的作用是用来控制setInterval计时器
    var time = setInterval(dome,200);
  </script>
</body>
</html>
